<template>
  <div class="ring-box flex-center">
    <div :style="border" class="ring-middle flex-center">
      <div class="ring-in flex-center flex-column">
        <div class="ring-title flex-center">
          {{ title }}
          <img @click="handleEitNum" class="ring-img" v-if="image" :src="image" alt="" />
        </div>
        <div class="ring-number">{{ number }}</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
   name: 'RingView',
  props:{
    title:{
      type:String,
      default:()=> ''
    },
    number:{
      type:Number,
      default:()=> 0
    },
    maid: {
      type:String,
      default:()=> ''
    },
    index: {
      type:Number,
      default:()=> -1
    },
    image: {
      type:String,
      default:()=> ''
    },
    border: {
      type:String,
      default:()=> ''
    },
  },
  data () {
    return {

    }
  },
  mounted (){

  },
  methods: {
    /**
     * 修改数量
     */
    handleEitNum() {
      this.$emit('handleEitNum',{ index:this.index, maid:this.maid })
    }
  }
}
</script>


<style scoped>
  .flex-column {
    flex-direction: column;
  }
  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ring-box {
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background-color: #F5F5F9;
  }
  .ring-middle {
    width: 218px;
    height: 218px;
    border-radius: 50%;
  }
  .ring-in {
    width: 206px;
    height: 206px;
    border-radius: 50%;
    background-color: #FFFFFF;
  }
  .ring-title {
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .ring-img {
    width: 20px;
    height: 25px;
    margin-left: 6px;
    cursor: pointer;
  }
  .ring-number {
    font-size: 54px;
    font-family: Myriad Pro;
    font-weight: 400;
    color: #333333;
    line-height: 46px;
    margin-top: 33px;
  }
</style>
